<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10">
        <div class="mainor_form small-top">
          <el-form
            :inline="true"
            :model="menuForm"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="菜谱名称：" prop="name">
              <el-input ref="nameInput" v-model="menuForm.name" placeholder="请输入菜谱名称" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="用户分组：" prop="group_id">
              <el-select
                v-model.trim="menuForm.group_id"
                placeholder="请选择"
                class="wid220"
                @change="getSearchFor"
              >
                <el-option
                  v-for="item in listingList"
                  :key="item.title"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建日期：" prop="sendTime">
              <el-date-picker
                v-model="menuForm.sendTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="dateOption"
              />
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading">
            </MainFormBtn>
          </el-form>
        </div>
        <div class="main-controls-wrap">
          <div>
            <el-button class="mainor_tea fill-height" @click="addMeal">新增菜谱</el-button>
          </div>
        </div>

        <div class="main_table">
          <el-table
            ref="multipleTable"
            :data="tableList"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            v-loading="listLoading"
            :header-cell-class-name="this.$verticaline"
            :height="borderHeight + 20"
            :header-cell-style="tableHeightStyle"
            @header-dragend="changeTableWidth"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column label="菜谱名称" prop="name" width="200" />
            <el-table-column label="状态" prop="status">
              <template slot-scope="scope">
                <span :style="{ opacity: scope.row.status === '已停用' ? '0.5' : '' }">{{ scope.row.status }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户分组" prop="user_group" />
            <el-table-column label="备注" prop="remark" />
            <el-table-column label="创建人" prop="create_user" />
            <el-table-column label="创建时间" prop="created_at" />
            <el-table-column label="今日生成订单数" prop="order_num" />
            <el-table-column
              label="管理操作"
              prop="title"
              align="left"
              fixed="right"
              width="180"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="editMeal(scope.row.id)">编辑</el-link >
                <el-link @click="seeMeal(scope.row.id)">查看</el-link >
                <el-link type="danger" @click="blockUp(scope.row)" v-if="scope.row.status !== '已停用'">停用</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <div class="main_page_r">
            <MainPagination
              :current-page="currentPage"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeSizePage"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import { puzzleImg } from "@/api/currency";
import { menuData } from '../mockData'
import dateOption from "@/options/dateOption";
import { getInfo } from '@/api/menu.js'
const { menuForm, listingList, tableList, currentPage, totalCount, pageSize } = menuData

export default {
  mixins: [mixins],
  components: { },
  data() {
    return {
      menuForm,
      listingList,
      listLoading: false,
      tableList,
      currentPage,
      totalCount,
      pageSize,
      dateOption,
      puzzleImg,
    };
  },
  created() {
    // 列表
    this.getNumerical(220);
    this.getData()
  },
  methods: {
    reset() {
      this.$refs.userListFrom.resetFields()
      this.getSearchFor()
    },
    addMeal() { //  新增套餐
      this.$router.push({
        path: '/menu/list/add',
        query: {
          isEdit: true
        }
      })
    },
    editMeal(id) {  //编辑套餐
      this.$router.push({
        path: '/menu/list/add',
        query: {
          id,
          isEdit: true
        }
      })
    },
    seeMeal(id) {  //查看套餐
      this.$router.push({
        path: '/menu/list/add',
        query: {
          id,
          isEdit: false
        }
      })
    },
    getSearchFor() {  //  搜索
      this.currentPage = 1
      this.getTableData()
    },
    changeSizePage(page) {
      this.pageSize = page
      this.getTableData()
    },
    changePage(page) {
      this.currentPage = page
      this.getTableData()
    },
    handeleEdit() {
    },
    getData() {
      getInfo('/common/getUserGroup', {}).then(res => {
        if(res.data) {
          this.listingList = res.data
        }
      })
      this.getTableData()
    },
    getTableData() {
      let obj = {
        ...this.menuForm,
        created_at: this.menuForm.sendTime.join('_')
      }
      delete obj.sendTime
      this.listLoading = true
      getInfo('/packageMenu/list', {
        ...obj,
        page: this.currentPage,
        pagesize: this.pageSize
      }).then(res => {
        this.tableList = res.data.list
        this.totalCount = res.data.total
        this.listLoading = false
      })
    },
    blockUp(row) {  //  停用
      getInfo('/packageMenu/switch', {
        id: row.id,
        status: '0'
      }, 'post').then(res => {
        if(res.errcode == 0) {
          this.$message.success('停用成功')
          this.getTableData()
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 100px);
    .el-form-item {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 4px;
      }
    }
  }
}
.main_table {

}

// 导出订单表头
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px;
}
.maintip {
  text-align: center;
  padding-top: 15px;
  font-size: 18px;
  span {
    display: inline;
    padding: 18px 0;
    color: red;
  }
}
.type1 {
  color: #03a98e;
}
.type2 {
  color: red;
}
.type3 {
  color: #e47c02;
}
// 导入
.importForm {
  display: flex;
  align-items: center;
  justify-content: center;
}
.allot_type_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  & > div {
    width: 90px;
    height: 90px;
    margin: 10px 0;
    text-align: center;
    line-height: 90px;
    font-size: 14px;
    color: #585858;
    border: 1px solid #DCDFE6;
    cursor: pointer;
    border-radius: 8px;
    &:hover {
      color: #03a98e;
      border-color: #03a98e;
    }
  }
}
.main_dialog_copy {
  /deep/ .el-dialog {
    margin-top: 30vh !important;
  }
}
/deep/.main_table .el-table--small td .cell {
  height: auto;
}
/deep/.el-input--suffix .el-input__inner {
  padding-right: 0px;
}
/deep/.el-message-box__wrapper .el-button:focus,
.el-message-box__wrapper .el-button:hover,
.el-dialog__wrapper .el-button:focus,
.el-dialog__wrapper .el-button:hover {
  background: #03a98e;
  border-color: #03a98e;
  color: white;
}
.flexs {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 5px;
}
.dialog_footer {
  justify-content: flex-end;
  display: flex;
  margin-top: 20px;
}
/deep/.el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}
</style>
